<style>
/*订单显示*/
.item{ width:100px; height:165px; border:1px solid #ccc; padding:5px;border-radius:5px;float:left;margin:5px;}
.item .pic{width:80px; float:right;text-align:center;}
.item .pic img{max-width:80px; max-height:80px;border-radius:5px;}
.item .text{text-align:center;clear:both;line-height:26px;}
.pic{width:80px;height:80px;}
.Batch .pic{height:50px;}
.btn-status-1{background-color:#C9E2E8;}
.btn-status-2{background-color:red;}
.btn-status-3{background-color:#FDD500;}
.btn-status-4{background-color:green;}
</style>
<div class="fixed-bar">
<form class="layui-form layui-form-pane fixed-bar-form" action="{:url()}" method="get" id="distributing-search">
<div class="layui-form-item">	
	<div class="layui-inline">
		<label class="layui-form-label">订单号</label>
		<div class="layui-input-inline">
			<input type="text" name="client_ordernum" lay-verify="" placeholder="输入订单号" class="layui-input">
		</div>
	</div>
	<div class="layui-inline">
		<label class="layui-form-label">所属工厂</label>
		<div class="layui-input-inline">
			{:Form::select('factory_id', '', $factoryKV, '', '')}
		</div>
	</div>
	<div class="layui-inline caichuang_over_date_searchinput">
		<label class="layui-form-label">裁床日期</label>
		<div class="layui-input-inline">
			<input type="text" name="caichuang_over_date_range" readonly="" id="caichuang_over_date_range" lay-verify="" placeholder="选择裁床完成日期" class="layui-input">
		</div>
	</div>
    <input name="action_state" id="action_state" type="hidden" value="1" />
	<div class="layui-inline">
		<button type="submit" class="layui-btn" lay-submit="" lay-filter="search">搜索</button>
	</div>
</div>
</form>
</div>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="clear:both;">
    <ul class="layui-tab-title" id="vue_tab_content">
        <li class="layui-this"><a onclick="statCli(1)" href="#">辅料出库（<span class="red bold first_count">{$fuliaoNeedDistributCount}</span>条）</a></li>
        <li><a onclick="statCli(2)" href="#">调拨出库（<span class="red bold second_count">{$batch_count}</span>条）</a></li>
        <li><a onclick="statCli(3)" href="#">占用出库（<span class="red bold chird_count">{$fabricsCount}</span>条）</a></li>
    </ul>
</div>
<div class="layui-row">
	<div id="view">loading..</div>
</div>
<script id="tpl" type="text/html">
{{#  layui.each(d, function(kkk, vvv){ }}
	<div class="item layui-anim layui-anim-scaleSpring item-{{ vvv.client_ordernum }}">
		<div class="pic"><img src="{{ vvv.pic }}" class="lay-pic"></div>
		<div class="text">
			<a href="{:url('distributing/detail')}?id={{ vvv.id }}" class="hisi-iframe" hisi-data="{width: '940px', height: '600px'}" title="配料清单">{{ vvv.client_ordernum }}</a><br>
			货期-{{ vvv.shipment_time_text }}<br>
			<a href="javascript:void(0)" class="layui-btn layui-btn-xs action-text {{ btnStatusArr[vvv.status] }}" data-client_ordernum="{{ vvv.client_ordernum }}" data-id="{{ vvv.id }}" data-status="{{ vvv.status }}">{{ vvv.action_text }}</a>
			{{# if(vvv.apply_used_id > 0){ }}
				<a class="layui-icon" style="color:blue;font-weight:bold;">&#xe605;</a>
			{{#  } }} 
		</div>
	</div>
{{#  }); }}
</script>

<script id="batchTpl" type="text/html">
{{#  layui.each(d, function(kkk, vvv){ }}
	<div class="item layui-anim layui-anim-scaleSpring item-{{ vvv.client_ordernum }} Batch">
		<div class="pic"><img src="{{ vvv.pic }}" class="lay-pic"></div>
		<div class="text">
			<div>{{vvv.client_ordernum}}</div>
			<div style="height:24px;overflow:hidden;"><a href="javascript:openCheckoutWindow('{{ vvv.stock_ids}}','{{vvv.batch_number}}')" title="{{ vvv.name }}">{{ vvv.name }}</a></div>
			{{ vvv.factory_name}}<br>
			<a href="javascript:openCheckoutWindow('{{ vvv.stock_ids}}','{{vvv.batch_number}}')" class="layui-btn layui-btn-xs layui-bg-{{ vvv.btn_style }}">{{ vvv.action_text }}</a>
		</div>
	</div>
{{#  }); }}
</script>
<script id="fabricsTpl" type="text/html">
{{#  layui.each(d, function(kkk, vvv){ }}
	<div class="item layui-anim layui-anim-scaleSpring item-{{ vvv.client_ordernum }}">
		<div class="pic"><a href="javascript:fabricsCheckouts('{{ vvv.stock_ids}}','{{vvv.batch_number}}')" title="配料清单"><img src="{{ vvv.pic }}"></a></div>
		<div class="text">
			<a href="javascript:fabricsCheckouts('{{ vvv.stock_ids}}','{{vvv.batch_number}}')" title="配料清单">{{ vvv.client_ordernum }}</a><br>
			货期-{{ vvv.shipment_time_text }}<br>
			<a href="javascript:fabricsCheckouts('{{ vvv.stock_ids}}','{{vvv.batch_number}}')" class="layui-btn layui-btn-xs action-text layui-bg-{{ vvv.btn_style }}">{{ vvv.action_text }}</a>
			{{# if(vvv.apply_used_id > 0){ }}
				<a class="layui-icon" style="color:blue;font-weight:bold;">&#xe605;</a>
			{{#  } }} 
		</div>
	</div>
{{#  }); }}
</script>

{include file="system@block/layui" /}

<script>
	var btnStatusArr = {"1":"layui-btn-normal","2":"layui-btn-danger","3":"layui-btn-warm","4":""};
	layui.use([ 'element', 'layer', 'laytpl', 'laydate'], function() {
		var element = layui.element;
		var layer = layui.layer;
		var $ = layui.jquery;
		var form = layui.form;
		var laytpl = layui.laytpl;
		var laydate = layui.laydate;
		
		var orderArr = [];
		var isFirst = true;
		
		laydate.render({
		    elem: '#caichuang_over_date_range'
		    ,range: '~'
		    ,theme: 'molv'
		    ,mark: {'{:$today}':''}
		    ,change: function(value, date, endDate){
		    	$('#caichuang_over_date_range').val(value);
            	$('#layui-laydate1').remove();//关闭面板
            }
		});
		
		window.status=1;
        window.statCli = function(status) {
            var url='{:url()}?status='+status;
			$("#action_state").val(status);
			if(status==2){
				getNewData(status)
			}
			if(status==1){
				isFirst=true;
				getOrders();
			}
			if(status==3){
				getCheckoutFabrics(status);
			} 
			$(".caichuang_over_date_searchinput").css("display",status==1 ? 'inline-block' : 'none');
        }
		window.getNewData = function (status) {
			$.ajax({
			   type: "POST",
			   url: "{:url('')}?action_state="+status,
			   data: $('#distributing-search').serialize(),
			   dataType:"json",
			   success: function(res){
				   if (res.code==1) { // 更新全部					   
					   var Tpl = $('#batchTpl').html();
					   var datacount= res.data.length;
					   $(".second_count").html(datacount);
					   laytpl(Tpl).render(res.data, function(html){
					   		$('#view').html(html);
					   });
					   if(datacount<1){
						   $('#view').html("<div style='margin:30px 60px;'>暂无相关批量出库数据</div>");
					   }
				   }else{
                        layer.msg(res.msg, {icon: 2,anim: 6});
					}
			   }
			})
		}
		//获取面料出库/占用出库信息
		window.getCheckoutFabrics = function (status) {
			$.ajax({
			   type: "POST",
			   url: "{:url('')}?action_state="+status,
			   data: $('#distributing-search').serialize(),
			   dataType:"json",
			   success: function(res){
				   if (res.code==1) { // 更新全部					   
					   var Tpl = $('#fabricsTpl').html();
					   var datacount= res.data.length;
					   $(".chird_count").html(datacount);
					   laytpl(Tpl).render(res.data, function(html){
					   		$('#view').html(html);
					   });
					   if(datacount<1){
						   $('#view').html("<div style='margin:30px 60px;'>暂无相关面料出库数据</div>");
					   }
				   }else{
                        layer.msg(res.msg, {icon: 2,anim: 6});
					}
			   }
			})
		}
		// 获取某些物料的各厂数据
		window.openCheckoutWindow = function(stock_ids=0,batch_number=0) {
			var title='批量出库';
			layerStockOutIn = layer.open({
				type: 2
				,area: ['1140px','500px']
				,offset: '110px'
				//,shade:[0.8, '#393D49']
				,anim: parseInt(Math.random()*(6+1),10)
				,skin:'layui-layer-molv'
				,title:title
				,content: "{:url('detailCheckOuts')}?action=checkoutManage&stockids="+stock_ids+"&batch_number="+batch_number
			});
		}
		
		window.fabricsCheckouts = function(stock_ids=0,batch_number=0) {
			var title='占用出库';
			layerStockOutIn = layer.open({
				type: 2
				,area: ['1140px','500px']
				,offset: '110px'
				//,shade:[0.8, '#393D49']
				,anim: parseInt(Math.random()*(6+1),10)
				,skin:'layui-layer-molv'
				,title:title
				,content: "{:url('detailCheckOuts')}?action=fabricsCheckouts&stockids="+stock_ids+"&batch_number="+batch_number
			});
		}
		
		window.addEditIcon=function(clientOrdernum){
			$(".item-"+clientOrdernum).find(".text").find(".layui-icon").remove();
			$(".item-"+clientOrdernum).find(".text").append('<a class="layui-icon" style="color:blue;font-weight:bold;">&#xe605;</a>');
		}
     	// 获取订单
		window.getOrders = function () {
			$.ajax({
			   type: "POST",
			   url: "{:url('')}?action_state="+status,
			   data: $('#distributing-search').serialize(),
			   dataType:"json",
			   success: function(res){
				   if (isFirst) { // 更新全部
					   orderArr = [];
					   for (var i in res.data) {
						   var clientOrdernum = res.data[i].client_ordernum;
						   orderArr.push(clientOrdernum);
					   }
					   
					   var Tpl = $('#tpl').html();
					   laytpl(Tpl).render(res.data, function(html){
					   		$('#view').html(html);
					   });
					   var datacount= res.data.length;
					   $(".first_count").html(datacount);
					   if(datacount<1){
						   $('#view').html("<div style='margin:30px 60px;'>暂无相关辅料出库数据</div>");
					   }
				   } else {
					   var newOrderArr = [];
					   for(var i in res.data) {
						   var clientOrdernum = res.data[i].client_ordernum;
						   newOrderArr.push(clientOrdernum);
					   }
					   // 删除不存在的
					   for(var n in orderArr) {
						   if (newOrderArr.indexOf(orderArr[n]) == -1) {
							   $(".item-"+orderArr[n]).remove();
							   orderArr.splice(n, 1);
						   }
					   }
					   // 检测新增和修改
					   for(var i in res.data) {
						   var clientOrdernum = res.data[i].client_ordernum;
						   if (orderArr.indexOf(clientOrdernum) == -1) { // 新增
							   var Tpl = $('#tpl').html();
							   laytpl(Tpl).render([res.data[i]], function(html){
							   		$('#view').prepend(html);
							   });
							   orderArr.push(clientOrdernum);
						   } else {
							   if (res.data[i].status != $(".item-"+clientOrdernum + " .action-text").attr('data-status')) {
								   $(".item-"+clientOrdernum + " .action-text").attr('data-status', res.data[i].status);
								   $(".item-"+clientOrdernum + " .action-text").html(res.data[i].action_text);
								   $(".item-"+clientOrdernum + " .action-text").removeClass('layui-btn-normal');
								   $(".item-"+clientOrdernum + " .action-text").removeClass('layui-btn-danger');
								   $(".item-"+clientOrdernum + " .action-text").removeClass('layui-btn-warm');
								   $(".item-"+clientOrdernum + " .action-text").addClass(btnStatusArr[res.data[i].status]);
							   }
						   }
					   }
					   
				   }
				   isFirst = false;
				   element.init();
			   }
			});
		}
		getOrders();
		//var getOrdersInt = setInterval("getOrders()", 20000);
		
		// 搜索
		$(document).on('submit', '#distributing-search', function() {
			isFirst = true;
			$('#view').html('<img src="/static/mp/image/loading.gif">');
			var status=$("#action_state").val();
			statCli(status);
	        return false;
	    });
		
		// 确认收货
		$(document).on('click','.action-text',function(){
			var status = $(this).attr('data-status');
			var id = $(this).attr('data-id');
			var clientOrdernum = $(this).attr('data-client_ordernum');
			if (status == 4) {
				layer.confirm("您确定要执行该操作吗？", {btn: ['确认','取消']}, function(){
					$.ajax({
					   type: "POST",
					   url: "{:url('distributing/receipt')}",
					   data: "id="+id,
					   dataType:"json",
					   success: function(res){
						   if (res.code == 1) {
						   		$(".first_count").html(parseInt($(".first_count").eq(0).html())-1);
							   	$(".item-"+clientOrdernum).remove();
								layer.msg(res.msg, {icon: 1});
							} else {
								layer.msg(res.msg, {icon: 2,anim: 6});
							}
					   }
					})
				});
			}
		});
		
	});
</script>